import React, { useState, useEffect } from 'react';
import ProCard from '@ant-design/pro-card';
import RcResizeObserver from 'rc-resize-observer';
import style from "./index.less"
import { getListDashboard, getListComments, deleteListComments, putListComments, patchListComments, postListComments } from "../../services/ant-design-pro/api"
import { Col, Row, message, Dropdown, Menu, Modal, Popconfirm } from 'antd';
import { history } from 'umi';
import { Input } from 'antd';
import { DualAxes } from '@ant-design/plots';
import { PageContainer } from '@ant-design/pro-layout';
const DemoDualAxes = () => {
    const data = [
        {
            time: '2019-03',
            value: 350,
            count: 800,
        },
        {
            time: '2019-04',
            value: 900,
            count: 600,
        },
        {
            time: '2019-05',
            value: 300,
            count: 400,
        },
        {
            time: '2019-06',
            value: 450,
            count: 380,
        },
        {
            time: '2019-07',
            value: 470,
            count: 220,
        },
    ];
    const config = {
        data: [data, data],
        xField: 'time',
        yField: ['value', 'count'],
        geometryOptions: [
            {
                geometry: 'column',
            },
            {
                geometry: 'line',
                lineStyle: {
                    lineWidth: 2,
                },
            },
        ],
    };
    return <DualAxes {...config} />;
};
const { TextArea } = Input;
const data = [{
    name: "文章管理",
    path: "/article/allArticles"
}, {
    name: "评论管理",
    path: "/Comment"
}, {
    name: "文件管理",
    path: "/file"
}, {
    name: "用户管理",
    path: "/userManagement"
}, {
    name: "访问管理",
    path: "/AccessStatistics"
}, {
    name: "系统设置",
    path: "/System"
}]
type myProps = {
    className: string;
}
const Dashboard: React.FC<myProps> = (props) => {
    const [responsive, setResponsive] = useState(false);
    const [arr, setArr] = useState([]);
    const [comment, setComment] = useState([]);
    const [value, setValue] = useState("")
    const [count,setCont]=useState(1)
    useEffect(() => {
        getListDashboard().then(res => {
            setArr(res[0])
        })
        getListComments().then(res => {
            console.log(res[0]);
            setComment(res[0])
        })
    }, [count])
    const menu = (item: any) => {
        return (
            <Menu>
                <Menu.Item>
                    <ProCard title="评论详情-原始内容" headerBordered>
                        <div dangerouslySetInnerHTML={{ __html: item.html }}></div>
                    </ProCard>
                </Menu.Item>
            </Menu>
        )
    }
    const success = (id: string) => {
        putListComments(id).then(res => {
            if (res.pass) {
                message.success('评论已通过');
                setCont(count+1)
            }
        })
        
    };
    const error = (id: string) => {
        patchListComments(id).then(res => {
            if (!res.pass) {
                message.success('评论已拒绝');
                setCont(count+1)
            } 
        })
    };
    const [isModalVisible, setIsModalVisible] = useState(false);
    const showModal = () => {
        setIsModalVisible(true);
    };
    const handleOk = (item:any) => {
        item.content=value
        item.html=`<p>${value}</p>\n`
        setIsModalVisible(false);
        postListComments(item).then(res => {
            console.log(res);
            if(res){
                message.success('回复成功')
                setCont(count+1)
            }
        })
        
    };
    const handleCancel = () => {
        setIsModalVisible(false);
    };
    const confirm = (it: any) => {
        deleteListComments(it.id).then(res=>{
            console.log(res);
            if(res){
                message.success('删除成功')
                setCont(count+1)
            }
        })
        
    }
    const onChange = (e: any) => {
        setValue(e.target.value)
    };
    return (
        <div>
            <PageContainer
                fixedHeader
                header={{
                    title: '工作台',
                    breadcrumb: {
                        routes: [
                            {
                                path: '/dashboard',
                                breadcrumbName: '工作台',
                            },
                        ],
                    },
                }}
                content="你的角色"
            >
                <ProCard title="面板导航" headerBordered className={style.dashboard_top}>
                    <DemoDualAxes />
                </ProCard>
                <ProCard title="快速导航" headerBordered className={style.dashboard_top}>
                    {
                        data.map((item, index) => {
                            return <ProCard key={index} onClick={() => history.push(item.path)} >{item.name}</ProCard>
                        })
                    }
                </ProCard>
                <RcResizeObserver
                    key="resize-observer"
                    onResize={(offset) => {
                        setResponsive(offset.width < 596);
                    }}
                >
                    <ProCard
                        title="最新评论"
                        extra="全部评论"
                        bordered
                        headerBordered
                        split={responsive ? 'horizontal' : 'vertical'}
                        className={style.dashboard_top}
                    >
                        <Row>
                            {
                                arr && arr.length > 0 ? arr.map((item: any, index) => {
                                    return <Col span={6}
                                        key={index}>
                                        <ProCard bordered>
                                            <img
                                                alt="example"
                                                src={item.cover}
                                                style={{ width: '100%', background: "#fff", height: "120px" }}
                                            />
                                            <div>{item.title}</div>
                                        </ProCard>
                                    </Col>
                                }) : "暂无数据"
                            }
                        </Row>
                    </ProCard>
                </RcResizeObserver>
                <RcResizeObserver
                    key="1"
                    onResize={(offset) => {
                        setResponsive(offset.width < 596);
                    }}
                >
                    <ProCard
                        title="最新文章"
                        extra="全部文章"
                        bordered
                        headerBordered
                    >
                        <div className={style.ant_card_body}>
                            {
                                comment && comment.length > 0 ? comment.map((item: any, index) => {
                                    return <li key={index}>
                                        <span>{item.name}</span>
                                    在
                                    <span><a>文章</a></span>
                                    评论
                                    <span>
                                            <Dropdown overlay={menu(item)} placement="topCenter" arrow>
                                                <a><span>查看内容</span></a>
                                            </Dropdown>
                                        </span>
                                        <span>
                                            <span className={style.ant_card_body_square} style={item.pass ? { background: "#52c41a" } : { background: "#faad14" }} ></span>
                                            <span>{item.pass ? "通过" : "未通过"}</span>
                                        </span>
                                        <a className={style.ant_card_body_right}>
                                            <span onClick={() => success(item.id)}>通过</span>
                                            <span onClick={() => error(item.id)}>拒绝</span>
                                            <span onClick={showModal}>
                                                回复
                                            </span>
                                            <Modal title="回复评论" visible={isModalVisible} onOk={()=>handleOk(item)} onCancel={handleCancel} maskStyle={{ opacity: "0.1", background: "#8C8C8C" }}>
                                                <TextArea showCount maxLength={100} style={{ height: 120 }} onChange={onChange} />
                                            </Modal>

                                            <Popconfirm
                                                title="确认删除这个评论？"
                                                onConfirm={() => confirm(item)}
                                                okText="Yes"
                                                cancelText="No"
                                            >
                                                <span>删除</span>
                                            </Popconfirm>
                                        </a>
                                    </li>
                                }) : "暂无数据"
                            }
                        </div>

                    </ProCard>
                </RcResizeObserver>
            </PageContainer>
        </div>
    )
}
export default Dashboard
